<template>
	<view class="container">
		<block v-if="userInfo.is_author != 20">
				<u-empty mode="data" text="您当前还不是创作者~!" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
		</block>
		<block v-else>
			<view class="header">
				<view class="user">
					<view class="icon" @click="onSetting">
						<u-icon size="28" name="setting"></u-icon>
					</view>
					<view class="avatar">
						<u--image :src="userInfo.avatar.file_path" width="160rpx" height="160rpx" shape="circle">
						</u--image>
					</view>
					<view class="icon">
						<button open-type="share" class="u-reset-button">
							<u-icon size="28" name="share"></u-icon>
						</button>
					</view>
				</view>
				<view class="nickName" v-if="userInfo.real_name">
					<view class="text">{{ userInfo.real_name }}</view>
				</view>
				<view class="remarks" v-if="userInfo.remarks">{{ userInfo.remarks }}</view>
			</view>
			<view class="notice">
				<u-notice-bar bgColor="#fff" color="#82848a" :text="store.author_notice"></u-notice-bar>
			</view>
			<!-- 操作面板 -->
			<view class="grid">
				<u-grid :border="false" col="2">
					<u-grid-item @click="onCoverManage" v-if="store.is_author_close == 10">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN011EkCJZ1o5k3668q62_!!2064565174.png"
								:size="32"></u-icon>
						</view>
						<text class="grid-text">作品管理</text>
					</u-grid-item>
					<u-grid-item @click="onCoverOrder">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01e1BR9p1o5k31rT5nE_!!2064565174.png"
								:size="32"></u-icon>
						</view>
						<text class="grid-text">订单管理</text>
					</u-grid-item>
					<u-grid-item @click="onWallet">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i4/2064565174/O1CN01cA3Fr71o5k31rRkey_!!2064565174.png"
								:size="32"></u-icon>
						</view>
						<text class="grid-text">资金管理</text>
					</u-grid-item>
					<u-grid-item @click="onCustomer">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i4/2064565174/O1CN015hhqs31o5k3667Mdw_!!2064565174.png"
								:size="32"></u-icon>
						</view>
						<text class="grid-text">客户日志</text>
					</u-grid-item>
					<u-grid-item @click="onSetting">
						<view class="icon">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01Z19TuC1o5k30saas1_!!2064565174.png"
								:size="32"></u-icon>
						</view>
						<text class="grid-text">资料设置</text>
					</u-grid-item>
					<u-grid-item>
						<button open-type="contact" class="u-reset-button">
							<view class="icon">
								<u-icon
									name="https://img.alicdn.com/imgextra/i4/2064565174/O1CN019TjQk71o5k30DEn1e_!!2064565174.png"
									:size="32"></u-icon>
							</view>
							<text class="grid-text">在线客服</text>
						</button>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 发布作品 -->
			<view class="submit" @click="onReleaseCover" v-if="store.is_author_close == 10">
				<view class="btn">
					<u-button iconColor="#fff" color="linear-gradient(to right, #f22e38, #f22e38)" icon="tags"
						shape="circle" text="发布作品"></u-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		detail
	} from '@/api/user.js';
	import {
		config
	} from '@/api/system.js';
	export default {
		data() {
			return {
				store: {},
				userInfo: {}
			};
		},
		onShow() {
			this.getUser()
		},
		onLoad() {
			this.getStore()
		},
		methods: {
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
				}).catch(err => {

				})
			},
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			onCustomer() {
				uni.navigateTo({
					url: '/pages/author/customer/index'
				})
			},
			onWallet() {
				uni.navigateTo({
					url: '/pages/wallet/index/index'
				})
			},
			onCoverOrder() {
				uni.navigateTo({
					url: '/pages/author/order/index'
				})
			},
			onSetting() {
				uni.navigateTo({
					url: '/pages/author/setting/index'
				})
			},
			onCoverManage() {
				uni.navigateTo({
					url: '/pages/author/cover/index'
				})
			},
			onReleaseCover() {
				uni.navigateTo({
					url: '/pages/author/cover/release'
				})
			}
		}
	}
</script>

<style lang="scss">
	.notice {
		margin-top: 15rpx;
	}

	.grid {
		width: 92%;
		margin: 15rpx auto;
		background-color: #fff;
		border-radius: 15rpx;
		padding-bottom: 60rpx;

		.u-reset-button {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.icon {
			margin-top: 60rpx;
		}

		.grid-text {
			margin-top: 15rpx;
		}
	}

	.submit {
		width: 60%;
		position: fixed;
		bottom: 120rpx;
		left: 20%;

		.btn {
			.u-button {
				height: 100rpx !important;
			}
		}
	}

	.header {
		width: 100%;
		background-image: url('https://img.alicdn.com/imgextra/i3/2064565174/O1CN01azmlui1o5k3Cj4sql_!!2064565174.jpg');
		background-size: contain;
		padding-bottom: 30rpx;

		.nickName {
			text-align: center;
			margin: 15rpx 0rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #303133;
		}

		.remarks {
			width: 68%;
			margin: 0 auto;
			text-align: center;
			font-size: 24rpx;
			margin-bottom: 30rpx;
			color: #82848a;
			line-height: 42rpx;
		}

		.user {
			width: 60%;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			padding-top: 32rpx;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border: 8rpx solid #c8c9cc;
				margin: 0rpx 30rpx;
			}
		}
	}
</style>
